/*
* 资产验收
* */
import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {Route, Router, Switch, withRouter} from "react-router-dom";
import {ListViewPage, TabPage} from "weaver-mobile-page";
import {Popover, Button, Tools} from "weaver-mobile";
import {getRouteParams} from "../../util";

const getLabel = Tools.getLabel;

const Item = Popover.Item;

@inject("acceptanceStore")
@withRouter
@observer
class Acceptance extends Component {
    componentDidMount() {
        this.Init(this.props)
    }

    Init = (props) => {      //判断路由并请求数据
        const {acceptanceStore} = props;
        const {init} = acceptanceStore;
        const {path} = getRouteParams(props);
        if (path) {
            init(path);
        }
    };


    render() {
        const {acceptanceStore, history} = this.props;
        const {selectedTabIndex, showCheck, InstockList, InstockListHis, selectedRowKeys} = acceptanceStore;
        const {selectKeys, batchDo, batchApply, batchCancel, changeSelectedTabIndex} = acceptanceStore;

        const tab = {
            tabs: [
                {
                    title: getLabel(389833, "待验收"),
                    index: 0
                },
                {
                    title: getLabel(389834, "历史验收"),
                    index: 1
                }
            ],
            overlay: [
                (<Item key="0" value="inventory" style={{whiteSpace: "nowrap"}}>
                    <div onClick={() => {
                        batchDo()
                    }}>
                        {getLabel(127970, "批量验收")}
                    </div>
                </Item>)
            ],
            span: [3, 3],
            visible: false,     //是否展开tab三个点的选项卡
        };
        const tabProps = {
            onChange: (tab) => {
                if (tab.index === 0) {
                    history.replace("/acceptance/0");
                } else if (tab.index === 1) {
                    history.replace("/acceptance/1");
                }
                changeSelectedTabIndex(tab.index)
            },
            initialPage: 0,     //初始化tab
            page: selectedTabIndex     //当前tab
        };
        const popoverProps = {
            overlay: tab.overlay,
            visible: tab.visible
        };
        return (
            <div className='asset-wrapper'>
                <TabPage
                    className='asset-acceptance-top-bar'
                    tabs={tab.tabs}
                    span={tab.span}
                    tabProps={tabProps}
                    defaultTabBarProps={{page: 1}}
                    popover={selectedTabIndex === 0 && !showCheck && InstockList.data.length > 0}
                    popoverProps={popoverProps}
                />
                <div className="asset-acceptance-wrapper">
                    <Router history={history}>
                        <Switch>
                            <Route name="needInventory" path="/acceptance/0" render={() =>
                                <div>
                                    <ListViewPage.Normal
                                        key='id'
                                        multipleCheck
                                        showCheck={showCheck}
                                        store={InstockList}
                                        onRowClick={(item) => {
                                            if (!showCheck) {
                                                history.push("/acceptanceDetail/" + item.id)
                                            }
                                        }}
                                        onRowSelect={(keys) => {
                                            selectKeys(keys)
                                        }}
                                        selectedRowKeys={selectedRowKeys}
                                    />
                                    {showCheck ? <div className="cpt-button-group">
                                        <Button type="ghost" className='cpt-button-cancel' onClick={() => {
                                            batchCancel()
                                        }}>{getLabel(31129, "取消")}</Button>
                                        <Button type="primary" className='cpt-button-apply' onClick={() => {
                                            batchApply(history);
                                        }}>{getLabel(826, "确定")}</Button>
                                    </div> : ""}
                                </div>
                            }/>
                            <Route name="inventoried" path="/acceptance/1" render={() =>
                                <ListViewPage.Normal
                                    key='id'
                                    store={InstockListHis}
                                />
                            }/>
                        </Switch>
                    </Router>
                </div>
            </div>
        );
    }


}

module.exports = Acceptance;
